/* Tailwind CSS基础样式 */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* 全局基础样式重置 */
@layer base {
    /* HTML根元素 */
    html {
        @apply bg-gray-50;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* 首帧即提供侧边栏偏移的默认值，匹配默认偏好（sidebarWidth=60 -> 240px） */
    :root {
        --sidebar-offset: 240px;
    }

    /* 页面主体 */
    body {
        @apply bg-gray-50 text-gray-900;
        margin: 0;
        padding: 0;
        min-height: 100vh;
    }

    /* 标题样式重置 */
    h1, h2, h3, h4, h5, h6 {
        @apply font-semibold leading-tight;
    }

    h1 {
        @apply text-2xl;
    }

    h2 {
        @apply text-xl;
    }

    h3 {
        @apply text-lg;
    }

    h4 {
        @apply text-base;
    }

    /* 按钮样式重置 */
    button {
        @apply font-medium cursor-pointer;
        font-family: inherit;
    }

    /* 输入框样式重置 */
    input, textarea {
        @apply font-normal;
        font-family: inherit;
    }

    /* 链接样式重置 */
    a {
        @apply text-primary-600 hover:text-primary-700;
        text-decoration: none;
    }

    /* 焦点样式统一 */
    *:focus {
        @apply outline-none;
    }

    *:focus-visible {
        @apply ring-2 ring-primary-500 ring-opacity-50;
    }

    /* 全局滚动条样式 - 匹配页面整体风格 */
    * {
        scrollbar-width: thin;
        scrollbar-color: #9ca3af #f3f4f6;
    }

    *::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    *::-webkit-scrollbar-track {
        background: #f3f4f6;
        border-radius: 3px;
    }

    *::-webkit-scrollbar-thumb {
        background: #9ca3af;
        border-radius: 3px;
        transition: background-color 0.2s ease;
    }

    *::-webkit-scrollbar-thumb:hover {
        background: #6b7280;
    }

    *::-webkit-scrollbar-corner {
        background: #f3f4f6;
    }
}

/* 自定义组件样式 */
@layer components {
    /* 卡片基础样式 */
    .card {
        @apply bg-white border border-gray-100 rounded-md shadow-card hover:shadow-card-hover;
        @apply transition-all duration-200 ease-out;
    }

    /* 按钮基础样式 */
    .btn {
        @apply inline-flex items-center justify-center;
        @apply px-4 py-2 text-sm font-medium rounded-lg;
        @apply transition-all duration-200 ease-out;
        @apply focus-visible:ring-2 focus-visible:ring-offset-2;
    }

    .btn-primary {
        @apply btn bg-primary-600 text-white;
        @apply hover:bg-primary-700 focus-visible:ring-primary-500;
    }

    .btn-secondary {
        @apply btn bg-gray-100 text-gray-700 border border-gray-300;
        @apply hover:bg-gray-200 focus-visible:ring-gray-500;
    }

    .btn-danger {
        @apply btn bg-danger-600 text-white;
        @apply hover:bg-danger-700 focus-visible:ring-danger-500;
    }

    .btn-reset {
        @apply btn bg-white text-gray-600 border border-gray-300;
        @apply hover:bg-gray-50 focus-visible:ring-gray-400;
    }

    /* 输入框基础样式 */
    .input {
        @apply w-full px-3 py-2 text-sm;
        @apply border border-gray-300 rounded-lg;
        @apply bg-white placeholder-gray-500;
        @apply transition-colors duration-200;
        @apply focus:border-primary-500 focus:ring-1 focus:ring-primary-500;
    }

    /* 模态框样式 */
    .modal-backdrop {
        @apply fixed inset-0 bg-black bg-opacity-50;
        @apply flex items-start justify-center;
        @apply animate-fade-in;
        /* 外层不再滚动，避免外层滚动条出现 */
        overflow-y: hidden;
        z-index: 9999;
        /* 确保模态框可滚动且内容不被截断 */
        padding: 2rem 0;
        /* 最小高度确保居中效果 */
        min-height: 100vh;
    }

    .modal-content {
        @apply bg-white rounded-2xl shadow-modal;
        @apply max-w-lg w-full mx-4;
        @apply animate-scale-in;
        /* 确保内容不被截断且有适当的上下边距 */
        @apply my-auto;
        /* 最大高度限制，避免超出视口 */
        max-height: calc(100vh - 4rem);
        /* 使用内部 body 区域滚动；头/尾固定 */
        @apply flex flex-col overflow-hidden;
        /* 裁剪子元素，避免圆角处“背景分离” */
    }

    /* 工具提示样式 */
    .tooltip {
        @apply absolute z-50;
        @apply bg-gray-900 text-white text-xs;
        @apply px-2 py-1 rounded;
        @apply pointer-events-none;
        @apply animate-fade-in;
    }

    /* 表单错误样式 */
    .error-message {
        @apply text-danger-600 text-xs mt-1;
    }

    /* Toast通知样式 */
    .toast {
        @apply fixed top-4 left-1/2 transform -translate-x-1/2;
        @apply bg-gray-900 text-white px-4 py-2 rounded-lg;
        @apply text-sm font-medium;
        @apply animate-slide-up;
        z-index: 10000;
    }
}

/* 工具类扩展 */
@layer utilities {
    /* 文本省略 */
    .text-ellipsis {
        @apply truncate;
    }

    /* 多行文本省略 */
    .text-ellipsis-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .text-ellipsis-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 改进的多行文本省略类 - 解决断字和显示不全问题 */
    .text-ellipsis-2-improved {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        /* 优先在合适位置断开，避免单词内断开 */
        word-break: break-all;
        overflow-wrap: break-word;
        /* 移除自动连字符，避免不必要的断开 */
        hyphens: none;
        line-height: 1.4;
        /* 确保文本对齐 */
        text-align: left;
    }

    /* 针对URL的特殊处理 - 智能断行，只在分隔符处断开 */
    .text-ellipsis-2-url {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        /* 保护单词完整性，只在合适位置断开 */
        word-break: normal;
        overflow-wrap: break-word;
        /* 允许在URL分隔符处断开 */
        word-spacing: 0;
        hyphens: none;
        line-height: 1.4;
        text-align: left;
        /* 添加零宽空格机会，在URL分隔符后 */
        white-space: pre-wrap;
    }

    /* 保留换行 */
    .whitespace-pre-wrap {
        white-space: pre-wrap;
    }

    /* 隐藏滚动条 */
    .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }

    /* 玻璃态效果 */
    .backdrop-blur-glass {
        backdrop-filter: blur(8px);
        background-color: rgba(255, 255, 255, 0.8);
    }

    /* 全局拖拽光标控制样式 */
    .dragging-tabcard, .dragging-tabcard * {
        cursor: grabbing !important;
    }

    /* 当拖拽集合时，全局应用 grabbing 光标 */
    body.is-dragging {
        @apply cursor-grabbing;
    }

    /* 侧边栏宽度拖拽中：禁用 main 的 margin-left 过渡，保证实时跟随 */
    body.sidebar-resizing .main-container {
        transition: none !important;
    }
}
